<template>
  <div class="container">
    <div class="page-box">
      <div class="basic-box">
        <div class="sub-box">
          <el-row>
            <el-col :span="18">
              <div>
                <p v-if="detailData.name">姓名：{{detailData.name}}</p>
                <p v-if="detailData.idCard">身份证：{{detailData.idCard}}</p>
              </div>
              <div>
                <p v-if="detailData.sex">性别：{{detailData.sex}}</p>
                <p v-if="detailData.age">年龄：{{detailData.age}}岁</p>
                <p v-if="detailData.birthday">生日：{{detailData.birthday}}</p>
                <p v-if="detailData.education">学历：{{detailData.education}}</p>
                <p v-if="detailData.nation">民族：{{detailData.nation}}</p>
              </div>
              <div>
                <p v-if="detailData.domicilePlace">户籍地：{{detailData.domicilePlace}}</p>
                <p v-if="detailData.politicalStatus">{{detailData.politicalStatus}}</p>
              </div>
              <div>
                <p v-if="detailData.titleLevel">职称级别：{{detailData.titleLevel}}</p>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="h18"></div>
        <div class="sub-title">联系信息</div>
        <div class="h18"></div>
        <div class="sub-box">
          <p v-if="detailData.phone">手机号码：{{detailData.phone}}</p>
          <p v-if="detailData.currentResidence">通讯地址：{{detailData.currentResidence}}</p>
        </div>
        <div class="h18"></div>
        <div class="sub-title">个人状态</div>
        <div class="h18"></div>
        <div class="sub-box">
          <p v-if="detailData.jobStatus">就业状态：{{detailData.jobStatus}}</p>
          <p v-if="detailData.companyName">单位名称：{{detailData.companyName}}</p>
          <p v-if="detailData.trade">所属行业：{{detailData.tradeText}}</p>
          <p v-if="detailData.loseType">失业人员类型：{{detailData.loseType}}</p>
          <p v-if="detailData.nearestLoseDate">最近一次就/失业登记时间：{{detailData.nearestLoseDate}}</p>
          <p v-if="detailData.createNo">就业创业证：{{detailData.createNo}}</p>
          <p v-if="detailData.createNoDate">就业创业证生成日期：{{detailData.createNoDate}}</p>
          <p v-if="detailData.difficultyType">困难人员类别：{{detailData.difficultyType}}</p>
          <p v-if="detailData.isEducation">高校毕业生：{{detailData.isEducation}}</p>
          <p v-if="detailData.isHkmt">港澳台人员：{{detailData.isHkmt}}</p>
          <p v-if="detailData.isDifficulty">就业困难人员：{{detailData.isDifficulty}}</p>
          <p v-if="detailData.isLongTimeLose">长期失业者：{{detailData.isLongTimeLose}}</p>
          <p v-if="detailData.isDisabled">残疾人：{{detailData.isDisabled}}</p>
          <p v-if="detailData.isLoseJob">是否失业：{{detailData.isLoseJob?'否':'是'}}</p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { loseJobDetail } from '../../../api/personal';
export default {
  data () {
    return {
      detailData: {},
      id: '',
    };
  },
  created () {
    this.getDetail();
    this.id = this.$route.query.id;
  },
  beforeRouteUpdate (to, from, next) {
    this.id = to.query.id;
    loseJobDetail(to.query.id).then(data => {
      if (data.success) {
        this.detailData = data.data || {};
      } else {
        this.$message.error(`${data.msg}`);
      }
    });
    next();
  },
  methods: {
    getDetail () {
      loseJobDetail(this.$route.query.id).then(data => {
        if (data.success) {
          this.detailData = data.data || {};
        } else {
          this.$message.error(`${data.msg}`);
        }
      });
    },
  }
};
</script>
<style scoped>
.container {
    position: relative;
}

.basic-box span,
.sub-box p {
    margin-right: 20px;
    font-size: 14px;
    line-height: 36px;
    color: #585858;
}

.sub-box div {
    display: block;
}
.page-box {
    border: 1px solid #ebeef5;
    padding: 10px;
    width: 1200px;
    border-radius: 3px;
    box-sizing: border-box;
    min-height: calc(100vh - 180px);
    box-sizing: border-box;
}
img {
    border-radius: 50%;
    width: 130px;
    height: 130px;
    margin-top: 20px;
    /* background: url('../../../assets/img/logo.png') no-repeat;
    background-size: 100% 100%; */
}
/* img.girl {
    border-radius: 50%;
    width: 130px;
    height: 130px;
    margin-top: 20px;
    background: url('../../../assets/img/logoG.png') no-repeat;
    background-size: 100% 100%;
} */
.sub-title {
    height: 36px;
    background: #09f;
    color: #ffffff !important;
    line-height: 36px;
    padding-left: 10px;
    margin-right: 0;
}
.item-flex {
    display: flex !important;
}
.item-flex span {
    width: 168px;
}

.el-button {
    z-index: 1;
    position: absolute;
    top: 40px;
    left: 1110px;
    background: #3549a6;
    border-color: #3549a6;
    padding: 9px 25px;
    font-size: 14px;
}

.el-button:hover {
    opacity: 0.8;
}

.h18 {
    height: 18px;
}

.mw {
    min-width: 50%;
}

a {
    color: #09f;
}

pre {
    width: 668px;
    word-wrap: break-word;
}
</style>